<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="headers">
			<text class="title">Hello</text>
			<text>终于等到你了~</text>
		</view>
		<view class="userInfo">
			<view class="userView">
				<view class="userHerderFlex">
					<u--image :showLoading="true" src="../../static/login/user.png" width="44rpx" height="40rpx"
						radius="0"></u--image>
					<text>用户名</text>
				</view>
				<input type="text" placeholder="请输入您的名字" placeholder-style="color: #BEBDC6;" v-model="req.username" />
			</view>
			<!-- 		<view class="userView" @click="requestIf(0)">
				<view class="userHerderFlex">
					<u--image :showLoading="true" src="../../static/login/leibie.png" width="44rpx" height="40rpx"
						radius="0"></u--image>
					<text>学生类别</text>
				</view>
				<view class="buttonright">
					<input type="text" placeholder="请选择您的学生类别" placeholder-style="color: #BEBDC6;" disabled
						v-model="req.student_type_name" />
					<u--image :showLoading="true" src="../../static/login/sanjiao.png" width="24rpx" height="14rpx"
						radius="0"></u--image>
				</view>
			</view> -->
			<!-- <view class="userView" @click="requestIf(2)">
				<view class="userHerderFlex">
					<u--image :showLoading="true" src="../../static/login/yuzhong.png" width="44rpx" height="40rpx"
						radius="0"></u--image>
					<text>学习语种</text>
				</view>
				<view class="buttonright">
					<input type="text" placeholder="请选择您的学习语种" placeholder-style="color: #BEBDC6;" disabled
						v-model="req.learning_type_name" />
					<u--image :showLoading="true" src="../../static/login/sanjiao.png" width="24rpx" height="14rpx"
						radius="0"></u--image>
				</view>
			</view>
			<view class="userView" @click="requestIf(3)">
				<view class="userHerderFlex">
					<u--image :showLoading="true" src="../../static/login/jichusp.png" width="44rpx" height="40rpx"
						radius="0"></u--image>
					<text>基础水平</text>
				</view>
				<view class="buttonright">
					<input type="text" placeholder="请选择您的基础水平" placeholder-style="color: #BEBDC6;" disabled
						v-model="req.level_name" />
					<u--image :showLoading="true" src="../../static/login/sanjiao.png" width="24rpx" height="14rpx"
						radius="0"></u--image>
				</view>
			</view> -->
			<view class="userView" @click="requestIf(1)">
				<view class="userHerderFlex">
					<u--image :showLoading="true" src="../../static/login/bankuai.png" width="44rpx" height="40rpx"
						radius="0"></u--image>
					<text>分组</text>
				</view>
				<view class="buttonright">
					<input type="text" placeholder="请选择您的分组" placeholder-style="color: #BEBDC6;" disabled
						v-model="req.course_category" />
					<u--image :showLoading="true" src="../../static/login/sanjiao.png" width="24rpx" height="14rpx"
						radius="0"></u--image>
				</view>
			</view>
			<button class="login" @click="initialInfo" :style="{'background':$store.state.buttonColor}">登录</button>
		</view>
		<u-picker :show="picker_show" :columns="columns" keyName="name" @confirm="confirm"
			@cancel="picker_show = false"></u-picker>
	</view>
</template>
<script>
	import {
		initialInfo,
		getUserStudentType,
		getUserImprovePlate,
		getUserLearningType,
		getUserBasalLevel,
		groupingdata
	} from '../../api/login.js';
	export default {
		data() {
			return {
				Ifinx: 0,
				picker_show: false,
				columns: [],
				req: {
					username: '', //昵称
					student_type_name: '', //学生类别 name
					student_type_id: '', //学生类别
					learning_type_name: '', //学习语种 name
					learning_type_id: '', //学习语种id
					level_name: '', //基础水平 name
					level_id: '', //基础水平id
					improve_plate_name: '', //着重提升板块 name
					improve_plate_id: '', //着重提升板块id
					course_category: '', //分组
					course_category_id: '', //分组id
					shop_id: 0
				}
			}
		},
		methods: {
			onLoad(option) {
				if (option.token) {
					uni.setStorageSync('token', option.token);
					// this.userinfo()
				}
				if (uni.getStorageSync('shop_id')) {
					this.req.shop_id = uni.getStorageSync('shop_id')
					// this.req.shop_id = uni.getStorageSync('shop_id')
				}
			},
			requestIf(index = null) {
				switch (index) {
					// case 0:
					// 	this.getUserStudentType();
					// 	break;
					case 1:
						// this.getUserImprovePlate();
						this.getGroupingData()
						break;
						// case 2:
						// 	this.getUserLearningType();
						// 	break;
						// case 3:
						// 	this.getUserBasalLevel();
						// 	break;
				}
				this.picker_show = true;
				this.Ifinx = index;
			},
			/**
			@method 学习语种u-picker确认
			**/
			confirm(e) {
				switch (this.Ifinx) {
					case 0: //学生类型
						this.req = {
							...this.req,
							...{
								student_type_name: e.value[0].title || '',
								student_type_id: e.value[0].id || ''
							}
						};
						break;
					case 2: //学习语种
						this.req = {
							...this.req,
							...{
								learning_type_name: e.value[0].title || '',
								learning_type_id: e.value[0].id || ''
							}
						};
						break;
					case 3: //基础水平
						this.req = {
							...this.req,
							...{
								level_name: e.value[0].title || '',
								level_id: e.value[0].id || ''
							}
						};
						break;
						// case 1: //着重提升板块
						// 	this.req = {
						// 		...this.req,
						// 		...{
						// 			improve_plate_name: e.value[0].title || '',
						// 			improve_plate_id: e.value[0].id || ''
						// 		}
						// 	};
						// 	break;
					case 1: //分组
						this.req = {
							...this.req,
							...{
								course_category: e.value[0].name || '',
								course_category_id: e.value[0].id || ''
							}
						};
						break;
				}
				this.picker_show = false;
			},
			/**
			@method 学生类型
			**/
			async getUserStudentType() {
				try {
					const res = await getUserStudentType();
					if (res?.msg == 'success') {
						this.columns = [...[res.data]];
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 着重提升板块
			**/
			async getUserImprovePlate() {
				try {
					const res = await getUserImprovePlate();
					if (res?.msg == 'success') {
						this.columns = [...[res.data]];
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 获取学习语种
			**/
			async getUserLearningType() {
				try {
					const res = await getUserLearningType();
					if (res?.msg == 'success') {
						this.columns = [...[res.data]];
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 等级
			**/
			async getUserBasalLevel() {
				try {
					const res = await getUserBasalLevel();
					if (res?.msg == 'success') {
						this.columns = [...[res.data]];
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 分组
			**/
			async getGroupingData() {
				try {
					const res = await groupingdata({
						shop_id: 1
					});
					if (res?.code == 1) {
						this.columns = [...[res.data]];
					}
					console.log(this.columns, "this.columns")
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 注册信息
			**/
			async initialInfo() {
				try {
					//const res = await initialInfo(this.req);
					// let pattern = /^[A-Za-z0-9]+$/;
					// let isValid = pattern.test(this.req.username);
					// if (this.req.username) {
					// 	console.log("字符串只包含英文和数字");
					// } else {
					// 	uni.showToast({
					// 		title: '用户名只能输入英文或者数字！',
					// 		icon: 'none',
					// 		duration: 2000
					// 	});
					// 	return false;
					// }
					// if (this.req.username && this.req.student_type_id && this.req.learning_type_id && this.req
					// 	.level_id && this.req.improve_plate_id) {
					if (this.req.username && this.req.course_category_id) {
						const res = await initialInfo(this.req);
						if (res?.msg == 'success') {
							// if(this.level_id == 1){
							// 	//0基础
							// 	uni.reLaunch({
							// 		url: `/pages/Tabbar/Home/Home`
							// 	});
							// }else{
							// 	uni.reLaunch({
							// 		url: `/pages/Questionnaire/Test_questionnaire?title=${this.req.student_type_name}`
							// 	});
							// }
							console.log("reLaunch")
							uni.reLaunch({
								url: `/pages/Tabbar/Home/Home`
							});
						}
					} else {
						uni.showToast({
							title: '请先检查注册问题是否全部填写或者选择完成！',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
		}
	}
</script>
<style>
	page {}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		width: 100%;
		height: 100vh;

		.headers {
			width: 100%;
			height: auto;
			padding-top: 220rpx;
			padding-bottom: 100rpx;
			background-image: url('../../static/login/zhuche1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.title {
				font-weight: 600;
				font-size: 82rpx;
			}

			text {
				margin-left: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 46rpx;
				color: #333333;
				display: block;
			}
		}

		.userInfo {
			width: 75%;
			height: auto;
			margin: 0px auto;
			background-color: rgba(255, 255, 255, 0.8); // 
			box-shadow: 0px 2px 16px 0px #FFEEEE;
			border-radius: 32rpx;
			padding: 40rpx;

			.userView {
				width: 100%;
				border-bottom: 1px solid #E8E8E8;
				padding-bottom: 20rpx;
				margin-bottom: 30rpx;

				.userHerderFlex {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}
				}

				.buttonright {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				input {
					margin-top: 15rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
				}
			}

			.login {
				width: 95%;
				margin: 0px auto;
				height: 70rpx;
				border-radius: 50rpx;
				margin-top: 50rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				// background-color: #277ffe;
			}
		}
	}
</style>